<template>
<div id="main">
  <co-navbar v-model='nav'>
    <co-tab-item id="processing">待处理</co-tab-item>
    <co-tab-item id="done">已审批</co-tab-item>
  </co-navbar>
  <co-tab-container v-model="nav" swipeable class="page-loadmore-wrapper">    
    <co-tab-container-item id="processing">
      <card v-for='(item, i) in list' :item='item' :key='i'></card>
    </co-tab-container-item>
    <co-tab-container-item id="done">        
      <co-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded" ref='loadmore' key='loadmore'>
        <card v-for='(item, i) in doneList' :item='item' :key='i'></card>
        <div slot="bottom" class="co-loadmore-bottom">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
          <span v-show="bottomStatus === 'loading'">
            <co-spinner type="snake"></co-spinner>
          </span>
        </div>
      </co-loadmore>
    </co-tab-container-item>
  </co-tab-container>
</div>
</template>
<script>
import Card from './Card.vue';
export default {
  components: {
    Card
  },
  data() {
    return {
      nav: 'processing',
      doneList: [],
      list: [{
        type: 1,
        status: 0,
        text: '我热爱我的工作!!'
      }, {
        type: 2,
        status: -1,
        text: '好困=_=。。。'
      }],
      allLoaded: false,
      bottomStatus: ''
    };
  },
  methods: {
    handleBottomChange(status) {
      this.bottomStatus = status;
    },
    loadBottom() {
      var that = this;
      setTimeout(function() {
        const l = that.doneList.length;
        l > 16 ? that.closeList() : that.addList();
        that.$refs.loadmore.onBottomLoaded();
      }, 1500);
    },
    addList() {
      this.doneList = this.doneList.concat([
        {
          type: 1,
          status: 1,
          text: '玩蛇'
        },
        {
          type: 0,
          status: 1,
          text: '玩球'
        },
        {
          type: 2,
          status: 1,
          text: '玩毛线'
        },
        {
          type: 2,
          status: 1,
          text: '玩鸡毛'
        }
      ]);
    },
    closeList() {
      this.allLoaded = true;
      this.$toast('没有更多数据');
    }
  },
  mounted() {
    this.$indicator.open('加载中...');
    setTimeout(() => {
      this.addList();
      this.$indicator.close();
    }, 1700);
  }
};
</script>
<style>
.page-loadmore-wrapper {
    overflow: scroll;
    margin-top: 3px;
    height: calc(100% - 46px - 3px);
  }

  .co-spinner {
    display: inline-block;
    vertical-align: middle;
  }

  .co-loadmore-bottom span{
    display: inline-block;
    transition: .2s linear;
    vertical-align: middle;
  }      
  .co-loadmore-bottom .is-rotate {
    transform: rotate(180deg);
  }
</style>

